<template>
  <div class="my-profile">
    <div
      class="my-profile__header h-50px flex justify-between items-center px-16px"
    >
      <span class="text-14px font-700 text-text-3">{{ $t("title") }}</span>
      <svg class="h-14px w-14px fill-text-6" @click="$router.go(-1)">
        <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Close"></use>
      </svg>
    </div>
    <div class="my-profile__body bg-fog-10 p-18px h-[calc(100vh-50px)]">
      <div class="avatar text-center mt-48px">
        <img
          class="h-144px w-144px rounded-144px"
          src="https://img2.bc.game/avatar/26314837/s?t=1704768207770"
          alt=""
        />
        <div class="-mt-24px">
          <button
            class="bg-fog-43 border-none text-12px px-12px py-8px rounded-8px text-text-3"
          >
            {{ $t("edit_btn") }}
          </button>
        </div>
      </div>
      <div class="form p-13px mt-24px">
        <div class="form-item">
          <div class="form-item__title text-12px text-text-14 pb-8px">
            {{ $t("form_title") }}
          </div>
          <van-field
            :placeholder="`2-16 ${$t('characters')}`"
            type="text"
            clearable
            autocomplete="off"
          />
          <div class="px-10px  text-10px text-text-14">
            {{ $t("desc") }}
          </div>
        </div>
        <van-button
          block
          native-type="submit"
          class="text-text-3 bc-login-btn !w-[100%]"
        >
          {{ $t("modify") }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const $t = key => {
  return t("my-profile." + key);
};
</script>

<style></style>
